<table id="account_a_table" width="400px" align="center">
<tr>
	<td align="right" width="30%">Người dùng :  </td>
    <td><input type="text" id="un" value="" /></td>
</tr>
<tr>    
	<td align="right">Mật khẩu :  </td>
    <td><input type="password" id="pwd" value="" size="25" /></td>
</tr>
<tr>    
	<td align="right">Nhóm :  </td>
    <td><div id="magrp"></div><input type="hidden" id="magrp1" value="" /></td>
</tr>    
</table>

<script type="text/javascript" language="javascript">
	$("#account_a_table #pwd").setMask({
		mask:"********************",
		onInvalid:function(c,nKey){
			msgbox("fail","ký tự '"+c+"' không hợp lệ !.");
			$(this).css("background","red");
		},
		onValid: function(c,nKey){
			$(this).css("background","#40FF3F");
		},
		onOverflow: function(c,nKey){
			msgbox("fail","Quá số ký tự cho  phép !");
			$(this).css("background","red");
		}
	});
	$("#account_a_table #un").setMask({
		mask:"********************",
		onInvalid:function(c,nKey){
			msgbox("fail","ký tự '"+c+"' không hợp lệ !.");
			$(this).css("background","red");
		},
		onValid: function(c,nKey){
			$(this).css("background","#40FF3F");
		},
		onOverflow: function(c,nKey){
			msgbox("fail","Quá số ký tự cho  phép !");
			$(this).css("background","red");
		}
	});
	
	$("#account_a_table #magrp").flexbox('modules/groups/json.php',{
			resultTemplate: "<tr><td>{id}</td><td>{name}</td></tr>",
			watermark: "Chọn nhóm",
			paging: {pageSize:5},
			allowInput: true,
			width: 200,
			onSelect: function() {
				$("#account_a_table #magrp1").attr("value",this.getAttribute("hiddenValue"));
		}
	});
	$("#account_a_table #un").focus();
</script>	
